<template>
  <div class="historyWrap" v-title="title">
    <!-- 头部导航栏 -->
    <ul class="tabUl">
      <li class="tabli" @click="changeTab(1)" :class="{active:isActive==1}">
        <span>打印</span>
      </li>
      <li class="tabli" @click="changeTab(2)" :class="{active:isActive==2}">
        <span>复印</span>
      </li>
      <li class="tabli" @click="changeTab(3)" :class="{active:isActive==3}">
        <span>扫描</span>
      </li>
    </ul>

    <!-- 3个面板组件 -->
    <!-- 1.面板组件 全部取件-->
    <div class="panelWrap" :class="{active:isActive==1}">
      <!-- <Cancel></Cancel> -->
    </div>
    <!--2. 面板组件 待取件 -->
    <div class="panelWrap" :class="{active:isActive==2}">
     <div></div>
     <div><sub-title>你好</sub-title></div> 
    </div>
    <!-- 3. 已取件 -->
    <div class="panelWrap" :class="{active:isActive==3}">
      面板3
    </div>
  </div>
</template>

<script>
// import Cancel from '../common/cancel/cancel.vue'
export default {
  data() {
    return {
      isActive: 1,
      title:'印迹'
    }
  },
  methods: {
    changeTab(index) {
      this.isActive = index
    }
  },
  created() {

  },
  components: {
    // Cancel
  }

}
</script>
 
<style lang='less' scoped>
@import './history.less';
</style>